@charset 'UTF-8';
/*----------------------------------------

	- pageTitle
	- sample

-----------------------------------------*/

/*----------------------------------------
	pageTitle
-----------------------------------------*/
.pageTitle {
	display: grid;
	grid-template-columns: auto max-content;
	grid-template-areas: 'pageTitleContainer pageCategory';
	inline-size: min(80%, 1120px);
	margin-block-start: 35px;
	margin-inline: auto;
}

.pageTitle .pageTitleContainer {
	grid-area: pageTitleContainer;
	inline-size: min(100%, 1028px);
	margin-block: 156px 23px;
}

.pageTitle .pageTitleContainer h1 {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size24);
	line-height: var(--line-height15);
}

.pageTitle .pageTitleContainer h1 span {
	display: block;
	margin-block-start: 13px;
	font-size: var(--font-size52);
}

.pageTitle .pageCategory>span:not(:first-of-type) {
	margin-inline-end: 0;
}

@media (width <=800px) {
	.pageTitle {
		inline-size: 94%;
		margin-block-start: 22px;
		padding-inline-start: 3%;
	}

	.pageTitle .pageTitleContainer {
		inline-size: 100%;
		margin-block: 78px 7px;
	}

	.pageTitle .pageTitleContainer h1 {
		font-size: var(--font-size16);
	}

	.pageTitle .pageTitleContainer h1 span {
		font-size: var(--font-size32);
	}
}

/* mapContent */
/* mapRouteに基本の高さを確保（背景画像基準） */
.map>div .mapRoute {
	position: relative;
	min-height: 400px;
	/* 基本高さを確保 */
}

.map>div .mapRoute picture {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

/* コースマップの絶対配置（レスポンシブ対応） */
.map>div .mapRoute .course-map {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 1コース目マップの配置 */
.map>div .mapRoute .course-map.course-1 {
	z-index: 3;
	/* PC版の配置 */
    inset-block-start: 16.5%;
    inset-inline-start: 24.8%;
    inline-size: 30.6%;
	block-size: auto;
}

/* 2コース目マップの配置 */
.map>div .mapRoute .course-map.course-2 {
	z-index: 2;
	/* PC版の配置 */
    inset-block-start: 16.5%;
    inset-inline-start: 24.8%;
    inline-size: 40.2%;
	block-size: auto;
}

/* SP版レスポンシブ対応 */
@media (width <=800px) {

	/* 1コース目マップのSP版配置 */
	.map>div .mapRoute .course-map.course-1 {
		inset-block-start: 16.55%;
		inset-inline-start: 27.3%;
		inline-size: 42.7%;
		block-size: auto;
	}

	/* 2コース目マップのSP版配置 */
	.map>div .mapRoute .course-map.course-2 {
        inset-block-start: 16.55%;
        inset-inline-start: 27.3%;
        inline-size: 56.3%;
		block-size: auto;
	}

	/* SP版でのmapRouteの高さ調整 */
	.map>div .mapRoute {
		min-height: 300px;
	}
}

/* コースマップの表示制御ギミック */
/* デフォルトは両方とも非表示 */
.mapContent .map>div .mapRoute .course-map.course-1 {
	opacity: 0;
	visibility: hidden;
	z-index: 3;
}

.mapContent .map>div .mapRoute .course-map.course-2 {
	opacity: 0;
	visibility: hidden;
	z-index: 2;
}

/* 1コース目がアクティブな時（JavaScriptで制御される .course-active-1 クラス使用） */
.mapContent.course-active-1 .map>div .mapRoute .course-map.course-1 {
	opacity: 1;
	visibility: visible;
	z-index: 3;
}

.mapContent.course-active-1 .map>div .mapRoute .course-map.course-2 {
	opacity: 0;
	visibility: hidden;
	z-index: 2;
}

/* 2コース目がアクティブな時の切り替え */
.mapContent.course-active-2 .map>div .mapRoute .course-map.course-1 {
	opacity: 0;
	visibility: hidden;
	z-index: 2;
}

.mapContent.course-active-2 .map>div .mapRoute .course-map.course-2 {
	opacity: 1;
	visibility: visible;
	z-index: 3;
}

/* コース切り替え時のスムーズなアニメーション（フェードのみ） */
.mapContent.switching .map>div .mapRoute .course-map {
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/*----------------------------------------
	Map Markers - Absolute Positioning (Ise)
-----------------------------------------*/

/* === Iseページ マーカー座標 - スライダー順序に対応 === */

/* Course 1 マーカー (1日目コース) - スライダー順序に対応 */
#\31-1 { top: 27.96%; left: 17.67%; }  /* ① 外宮（豊受大神宮） */
#\31-2 { top: 13.51%; left: 24.46%; }  /* ② 外宮別宮 月夜見宮 */
#\31-3 { top: 30%; left: 51.78%; }     /* ③ 内宮別宮 倭姫宮 */
#\31-4 { top: 19.25%; left: 51.96%; }  /* ④ 神宮美術館 */

/* Course 2 マーカー (2日目コース) - スライダー順序に対応 */
#\32-5 { top: 77.96%; left: 62.32%; }  /* ⑤ 内宮（皇大神宮） */
#\32-6 { top: 50.37%; left: 58.39%; }     /* ⑥ 内宮別宮 月読宮 */
#\32-7 { top: 25.18%; left: 58.92%; }  /* ⑦ 神宮徴古館 */
#\32-8 { top: 22.59%; left: 56.96%; }  /* ⑧ 神宮農業館 */

/* スマートフォン対応 */
@media (width <= 800px) {
	/* SP版での座標 - スライダー順序に対応 */
	#\31-1 { left: 17.25%; }  /* ① 外宮（豊受大神宮） */
	#\31-2 { left: 26.75%; }  /* ② 外宮別宮 月夜見宮 */
	#\31-3 { left: 65%; }        /* ③ 内宮別宮 倭姫宮 */
	#\31-4 { left: 65.25%; }     /* ④ 神宮美術館 */

	#\32-5 { left: 79.75%; }  /* ⑤ 内宮（皇大神宮） */
	#\32-6 { left: 74.25%; }        /* ⑥ 内宮別宮 月読宮 */
	#\32-7 { left: 75%; }  /* ⑦ 神宮徴古館 */
	#\32-8 { left: 72.25%; }     /* ⑧ 神宮農業館 */
}